<template>
  <div>
    <avue-data-display :option="option" style="cursor: pointer"></avue-data-display>
    <el-calendar v-model="value" />
  </div>
</template>

<script lang="ts" setup>
import {reactive, ref} from 'vue';
import router from "@/router";
import axios from "axios";
const value = ref(new Date())
const data = reactive({
  order:0,
  perfume:0,
  ingredient:0,
  brand:0
})
const initData = () => {
  axios.post("/api/other/dataN")
      .then(res=>{
        console.log(res)
        const msg = res.data.message
        option.value.data[0].count=msg[3]
        option.value.data[1].count=msg[0]
        option.value.data[2].count=msg[2]
        option.value.data[3].count=msg[1]
        data.order=msg[3]
        data.perfume=msg[0]
        data.ingredient=msg[2]
        data.brand=msg[1]
      })
}
initData()
const option = ref({
  span: 6,
  data: [
    {
      click: function (item) {
        router.push("/wiki/order")
      },
      count: data.order,
      // decimals: 2,
      title: '订单数量'
    },
    {
      click: function (item) {
        router.push("/wiki/perfume")
      },
      count: data.perfume,
      title: '香水数量',
      // color: "red",
      // fontColor: "#000",
    },
    {
      click: function (item) {
        router.push("/wiki/ingredient")
      },
      count: data.ingredient,
      title: '原料数量',
    },
    {
      click: function (item) {
        router.push("/wiki/bland")
      },
      count: data.brand,
      title: '品牌',
    }
  ]
})
</script>

<style scoped>
.el-col {
  text-align: center;
}
</style>
